<template>
  <div class="pages">
    <headerbar>修改手机号</headerbar>
    <div class="">
      <div class="">
        <div class="">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell list-item">
              原手机号：
              <span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input" type="text" v-model="oldMobile" readonly value="" /></span>
            </li>
            <li class="mui-table-view-cell list-item">
              新手机号<span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input login-put" type="text" v-model="newMobile" placeholder="请输入新手机号" value="" /></span>
            </li>
          </ul>
          <div class="pdv-3"></div>
          <div @click="save()" class="default-block-btn mgh-2">确认修改</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        oldMobile: '',
        newMobile: '',
        userInfo: {},
        partyInfo: {}
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      this.partyInfo = this.$localStorage.get('partyInfo')
      this.oldMobile = this.partyInfo.mobile
    },
    methods: {
      save () {
        // if (this.newPwd.length < 8) {
        //   return tools.alert('长度必须在8-20位之间')
        // }
        // if (/^(?![0-9]+$)(?![a-zA-Z]+$)/.test(this.newPwd) === false) {
        //   return tools.alert('密码必须包含数字和字母')
        // }
        if (this.newMobile === '') {
          return tools.alert('请输入新手机号')
        }
        if (!(/^1[3456789]\d{9}$/.test(this.newMobile))) {
          return tools.alert('手机号码格式有误，请重新输入')
        }
        let data = {
          userId: this.userInfo.id,
          mobile: this.newMobile
        }
        loginService.modifyMobile(data).then((res) => {
          if (res.code === 0) {
            tools.alert('修改手机号成功！')
            this.loadPartyInfo(this.userInfo.id)
          } else {
            tools.alert(res.message)
          }
        })
      },
      loadPartyInfo (userId) {
        this.fetchService.partyInfo(userId).then(res => {
          if (res.code === 0) {
            this.$localStorage.set('partyInfo', res.data)
            this.partyInfo = this.$localStorage.get('partyInfo')
            this.oldMobile = this.partyInfo.mobile
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .setup-input {
    height: 50px !important;
    font-size: 16PX;
  }
  .mui-table-view {
    font-size:14PX;
    .mui-table-view-cell {
      padding:15px 30px;
    }
  }
</style>
